<template>
  <div class="search-list">
    <div class="search-top">
      <div class="left">
        <el-button v-if="showAdd" type="primary" size="mini" @click="addBtn">{{
            addTitle
          }}</el-button>
        <div
            class="download"
            v-if="showDownload"
            @click="downloadClick"
            :style="{ cursor: showDownload ? 'pointer' : 'no-drop' }"
        >
          <img
              src="../../../public/images/download.png"
              style="width: 13px"
              alt="下载"
          />
        </div>
        <slot name="leftButton" />
      </div>
      <div v-if="amountView" class="amount">
        <div
            v-if="twoTotalAmount"
            class="top_left"
            style="width: 8%; border: 0"
        >
          <dl>
            <dd class="font_weight">{{ twoObject.value }}</dd>
            <dd class="top_right_bottom">{{ twoObject.label }}</dd>
          </dl>
        </div>
        <div class="top_left" style="width: 10%">
          <dl>
            <dd class="font_weight">{{ totalObject.value }}</dd>
            <dd class="top_right_bottom">{{ totalObject.label }}</dd>
          </dl>
        </div>
        <div class="top_right" style="width: 50%; margin-right: 15px">
          <dl v-for="item in otherOptions" :key="item.label">
            <dd class="font_weight">
              {{ item.value }}
            </dd>
            <dd class="top_right_bottom">
              <span
                  v-if="item.status"
                  class="Badge"
                  :class="item.status"
              ></span>
              <span>{{ item.label }}</span>
            </dd>
          </dl>
        </div>
      </div>
      <div v-else class="amount"></div>
      <div class="search">
        <template v-if="isSearchForm">
          <el-input
              :placeholder="placeholder"
              v-model.trim="searchInput"
              class="input-with-select"
              style="width: 410px"
              clearable
              @change="searchClick"
              @clear="clearClick"
          >
            <i
                slot="suffix"
                class="el-icon-search"
                style="cursor: pointer"
                @click="searchClick"
            ></i>
          </el-input>
        </template>
        <div class="search-Btn" v-if="showActionBtn">
          <div class="common">
            <img
                src="../../../public/images/filter.png"
                style="width: 10px"
                alt="筛选"
            />
            <span>筛选</span>
          </div>
          <div class="common">
            <i class="el-icon-s-fold"></i>
            <span>分组</span>
          </div>
          <div class="common">
            <i class="el-icon-star-on"></i>
            <span>收藏</span>
          </div>
        </div>
      </div>
      <div v-if="showSet">
        <i
            class="el-icon-setting cursor_pointer font_size_30"
            style="color: rgb(128,128,128)"
            @click="inspectionConfigClick"
        ></i>
      </div>
      <div class="right">
        <slot name="rightButton"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CommonSearch",
  components: {},
  props: {
    showAdd: {
      type: Boolean,
      default: true,
    },
    showDownload: {
      type: Boolean,
      default: false,
    },
    showActionBtn: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "请输入内容",
    },
    addTitle: {
      type: String,
      default: "添加",
    },
    totalObject: {
      type: Object,
      default: () => {
        return {
          value: 0,
          label: "全部物料",
        };
      },
    },
    otherOptions: {
      type: Array,
      default: () => [
        {
          value: 2,
          label: "安全库存",
          status: "success",
        },
        {
          value: 12,
          label: "欠料",
          status: "error",
        },
        {
          value: 2,
          label: "安全库存",
          status: "success",
        },
        {
          value: 12,
          label: "欠料",
          status: "error",
        },
      ],
    },
    searchSel: {
      type: Object,
      default: () => {
        return {
          value: "name",
          label: "",
        };
      },
    },
    twoTotalAmount: {
      type: Boolean,
      default: false,
    },
    twoObject: {
      type: Object,
      default: () => {
        return {
          value: 0,
          label: "车间总量",
        };
      },
    },
    amountView: {
      type: Boolean,
      default: true,
    },
    isSearchForm: {
      type: Boolean,
      default: true,
    },
    showSet: {
      type: Boolean,
      default: false,
    },
    inputName: {
      type: String,
      default: "",
    },
  },
  watch: {
    inputName(val) {
      this.searchInput = val;
    },
  },
  data() {
    return {
      searchInput: "",
      searchSelValue: this.searchSel,
    };
  },
  methods: {
    // 搜索
    searchClick() {
      this.$emit("searchClick", this.searchInput);
    },
    // 清除
    clearClick() {
      this.$emit("clearClick", 1);
    },
    // 添加
    addBtn() {
      this.$emit("addCommonClick");
    },
    // 下载
    downloadClick() {
      this.$emit("downloadClick");
    },
    // 模具-检查配置
    inspectionConfigClick() {
      this.$emit("inspectionConfigClick");
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.search-list {
  font-size: 13px;
  color: #333;
  width: 100%;
  .search-top {
    width: 100%;
    display: flex;
    align-items: center;
    .left {
      display: flex;
      width: 150px;
      .download {
        width: 30px;
        height: 30px;
        line-height: 35px;
        text-align: center;
        border: 1px solid #b1b1b1;
        border-radius: 4px;
        cursor: pointer;
      }
    }
    .amount {
      flex: 1;
      display: flex;
      justify-content: right;
      .top_left {
        width: 10%;
        border-right: 1px solid #ccc;
        display: flex;
        padding-right: 2%;
        flex-wrap: nowrap;
        flex-direction: row;
        align-content: center;
        justify-content: center;
        align-items: center;
        text-align: center;
        .font_weight {
          font-weight: 500;
          font-size: 18px;
          font-family: "DIN Alternate",serif;
        }
        .top_right_bottom {
          font-size: 12px;
        }
      }
      .top_right {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        justify-content: space-around;
        width: calc(90% - 197px);
        text-align: center;
        color: #666;
        margin-left: 10px;
        .font_weight {
          font-weight: 500;
          font-size: 18px;
          font-family: "DIN Alternate",serif;
        }
        .top_right_bottom {
          font-size: 12px;
        }
      }
    }
    .search {
      display: flex;
      align-items: center;
      width: auto;
      height: 60px;
      line-height: 60px;
      margin-right: 20px;
      margin-left: 20px;
      .el-icon-search {
        margin-top: 22px;
      }
      .search-Btn {
        display: flex;
        margin-left: 40px;
        background: #f3f3f3;
        height: 30px;
        border-radius: 4px;
        align-items: center;
        .common {
          width: 50px;
          text-align: center;
          cursor: no-drop;
        }
      }
    }
  }
  .success {
    background: #06c062;
  }
  .yellow {
    background: #e6a23c;
  }
}

::v-deep {
  .el-input__inner {
    height: 30px;
    //color: #2765e1;
  }
  .el-input__prefix,
  .el-input__suffix {
    height: 30px;
  }
  .el-input__icon {
    line-height: 30px;
  }
  .search {
    .el-select .el-input {
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #da2323;
    }
    // .el-input__suffix {
    //   // 处理前缀图标不垂直居中的问题
    //   height: auto;
    //   font-size: 15px;
    //   &-inner {
    //     flex-direction: row-reverse;
    //     -webkit-flex-direction: row-reverse;
    //     display: flex;
    //   }
    // }
    .el-input--suffix .el-input__inner {
      padding-right: 45px;
    }
    .search-sel .el-input--suffix .el-input__inner {
      padding-left: 5px;
      padding-right: 20px;
    }
  }
}
</style>
